<!-- 
 sanwenzx.com 页面 classify 信息显示
 -->
<template>
  <el-container>
    <!-- 分类 -->
    <el-aside>
      <div class="categories">
        <div
          class="category"
          :class="index == 0 ? 'active' : ''"
          v-for="(category, index) in categories"
          @click="categoryClick(category, index)"
          style="cursor: pointer;"
        >
          {{ category.name }}
          <el-divider style="margin: 5px;background-color: #eeeeee;width: 80px;"></el-divider>
        </div>
      </div>
    </el-aside>
    <!-- 分类下内容 -->
    <el-main>
      <!-- 小分类 -->
      <div class="major" v-for="major in majors" v-show="showMajor.view" style="display: inline-block;width:300px;margin-right: 100px;">
        <!-- 分割线 -->
        <el-divider></el-divider>
        
        <!-- 名字显示 -->
        <div class="majorName" @click="majorClick(major)" style="cursor: pointer;">{{ major.name }}</div>
        
        <el-divider></el-divider>
        
        <div class="articles" v-for="article in major.articles" style="cursor: pointer;" @click="articleClick(article)">
          <span>{{ article.date }}&nbsp;&nbsp;</span>
          <span>{{ article.name }}</span>
        </div>
      </div>
      
      <Article :article="articleInfo"/>
      <div v-show="showArticles.view">
        <el-page-header
          icon="el-icon-arrow-left"
          title="返回"
          @back="goBack"
          :content="major && major.name"
        >
        </el-page-header>
        <book-info v-for="bookInfo in bookInfos" :bookInfo="bookInfo" @click="articleClick(bookInfo)"/>
        <el-pagination
          @current-change="handleCurrentChange"
          v-model:currentPage="currentPage"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { ref, reactive, onMounted, watch, defineComponent } from "vue";
import { getClassify } from "@/api/axios/sanwenzx/classify";
import service from "@/utils/request";
import Article from "./Article.vue";
import { CODE_KEY, CODE_SUCCESS } from "@/api/params";
import BookInfo from "./BookInfo.vue";

export default defineComponent({
  components: {
    Article,
    BookInfo,
  },
  setup () {
    
    
    const currentPage = ref()
    const total = ref()
    const pageBaseUrl = ref()
    const major = ref()
    const handleCurrentChange = () => {
      // 获取数据
      getArticles()
    }
    
    const bookInfos = ref(
    // [
    //   {
    //     name: '',
    //     url: '',
    //     imgUrl: '',
    //     desc: ''
    //   }
    // ]
    )
    
    // 文章 相关信息
    const articleInfo = reactive({
      view: false,
      oldView: undefined,
      title: '',
      paragraphs: [],
    })
    
    const showMajor = reactive({
      view: true,
      oldView: undefined,
      index: -1,
    });
    
    const showArticles = reactive({
      view: false,
      oldView: undefined,
      index: -1,
    });

    /**
     * 
     * 三个 watch ，定位 major 与 articles 谁先不显示，因为 articles 点击 goback 肯定是回到 major,
     * 要关心的就是 点击 article 页面的 goback 后 怎么显示之前 的组件，
     * 所以在之后 点击 article 进入 article 页面后，会进行判断 major 与 articles 的显示，已经为 false 就不改变，为 true 再进行改变。
     * 先点击 major 后 会显示 articles，隐藏 major 组件，此时 major 组件为最后 隐藏，然后点击 articles 里的 article ，会将 articles 组件隐藏，major 不改变，最后隐藏的是 articles
     *  如果在 major 里点 article ，major 就是最后隐藏，article 组件点击 goback 就会回到 major。
     * 
     * 然后就是 articles 里的 goback ，点击时 不仅要将 major 设为显示，还要将 articles 设为隐藏，这时 articles 是最后隐藏，
     * 然后点击 major 里的 article ，major 变最后隐藏，article 的 goback ，然后显示 major。
     * 
     * 如果 articles 忘了设置隐藏，点击 major 里的 article 时会因为 major 与 articles 都要隐藏，这时他们隐藏的顺序就会影响显示。
     * 先隐藏 major ，点击 article 的 goback 就会显示 articles 组件，与理想违背。
     * 这里不管是 major 里的 article 还是 articles 里的 article 都是一个方法。
     * 而且就算先隐藏 articles ，但是这里 index 的改变还要通过 watch，对其原理不懂，两个设置 false 都很接近，如果是异步啊，监控反映啊什么的，一点时间上的不对都有 可能导致与理想不对。
     * 所以不管是 为了不显示 articles 还是之后的逻辑顺序正常，都要把 articles设置为隐藏。
     * 
     */
    watch(() => articleInfo.view, (newValue, oldValue) => {
      if(newValue === false) {
        if(showArticles.index === 0){
          showArticles.view = true;
        } else if (showMajor.index === 0) {
          showMajor.view = true;
        }
      }
    })
    
    watch(() => showArticles.view , (newValue, oldValue) => {
      if(newValue === false) {
        showArticles.index = 0;
        showMajor.index = 1;
      }
    })
    
    watch(() => showMajor.view , (newValue, oldValue) => {
      if(newValue === false) {
        showMajor.index = 0;
        showArticles.index = 1;
      }
    })
    
    // 侧边栏显示的分类
    const categories = ref()
    const RESPONSE_CATAGOTIES_KEY = "categories";
    
    // 右边显示的内容
    const majors = ref(
    // [
    //   {
    //     name: '', // 小分类名
    //     url: '', // 在爬取的网站上对应的 url
    //     articles: [ // 每个小分类下对应的文章信息，默认为 category 里的 优美散文 类别里的内容
    //       {
    //         date: '', // 更新日期
    //         name: '', // 文章名
    //         url: '', // 在爬取的网站上的 url
    //       }
    //     ]
    //   }
    // ]
    )
    const RESPONSE_CONTENT_KEY = "major";
    const RESPONSE_ARTICLES_INFO_KEY = "articles";
    
    /**
     * 更新样式：添加或删除 class 属性里的 active，表示当前点击
     * @param selectClassName 根据类名查找元素
     * @param index 根据 index 更改样式，将 index 的元素 添加 active ，其他全部删除
     * 
     */
    const activeSelect = (selectClassName, index)=> {
      let length = document.getElementsByClassName(selectClassName).length
      document.getElementsByClassName(selectClassName)[index].classList.add("active")
      for(let i = 0 ; i < length ; i++){
        if( i !== index) {
          document.getElementsByClassName(selectClassName)[i].classList.remove("active")
        }
      }
    }
    
    const categoryClick = (category, index) => {
      // console.log(category.url);
      
      if(category.name === "短篇小说" || category.name === "散文日记") {
        major.value = category;
        pageBaseUrl.value = undefined;
        getArticles()
      } else {
        // 获取数据
        service.request({
          method: "get",
          url: `/sanwenzx${category.url}`
        }).then(res => {
          if(res && res.data[CODE_KEY] === CODE_SUCCESS) {
            categories.value = res.data[RESPONSE_CATAGOTIES_KEY];
            majors.value = res.data[RESPONSE_CONTENT_KEY];
          }
          
          // 改变高亮
          activeSelect("category", index);
          // 文章可视改为 false
          showMajor.view = true;
          articleInfo.view = false;
          showArticles.view = false;
        })
      }
      
    }
    
    /**
     * 获取类别下文章
     */
    const getArticles = () => {
      service.request({
        method: "get",
        url: `/sanwenzx/getContent`,
        params: {
          // url : /riji/
          // baseUrl: list_xxx_
          // current xxx
          // final : /riji/list_xxx_xxx.html
          url: pageBaseUrl.value ? 
            (major.value.url.match("\/$") ?
              `${major.value.url}${pageBaseUrl.value}${currentPage.value}.html`
              : `${major.value.url}/${pageBaseUrl.value}${currentPage.value}.html`
            )
            : `${major.value.url}`,
        }
      }).then(res => {
        // console.log(res);
        if(res && res.data[CODE_KEY] === CODE_SUCCESS) {
          console.log("res==>", res)
          bookInfos.value = res.data[RESPONSE_ARTICLES_INFO_KEY];
          pageBaseUrl.value = res.data.pageBaseUrl;
          total.value = res.data.total;
          
          articleInfo.view = false;
          showMajor.view = false;
          showArticles.view = true;
        }
      })
    }
    
    // 点击 右边的大类别标题
    const majorClick = (selectMajor) => {
      // console.log(major.url)
      major.value = selectMajor;
      pageBaseUrl.value = undefined;
      currentPage.value = undefined;
      getArticles()
    }
    
    const articleClick = (article) => {
      
      // console.log(article.name)
      
      service.request({
        method: "get",
        url: `/sanwenzx/getArticle`,
        params: {
          url: article.url
        }
      }).then(res => {
        if(res && res.data[CODE_KEY] === CODE_SUCCESS) {
          articleInfo.title = article.name;
          articleInfo.paragraphs = res.data.paragraphs
          
          if(showMajor.view) {
            showMajor.view = false;
          }
          if(showArticles.view) {
            showArticles.view = false;
          }
          articleInfo.view = true;
          
          // 跳到 网页左上角（回到顶部）
          var top = document.body.scrollTop || document.documentElement.scrollTop
          scrollBy(0,-top);
        }
      })
      
    }
    
    const goBack = () => {
      showMajor.view = true;
      showArticles.view = false;
      
      // 重置分页的页数
      currentPage.value = 1;
      
      pageBaseUrl.value = undefined;
    }
    
    onMounted(() => {
      getClassify().then(res => {
        if(res && res.data[CODE_KEY] === CODE_SUCCESS) {
          console.log(res)
          categories.value = res.data[RESPONSE_CATAGOTIES_KEY];
          majors.value = res.data[RESPONSE_CONTENT_KEY];
        }
      })
    })
    
    return {
      categories,
      majors,
      categoryClick,
      majorClick,
      articleClick,
      articleInfo,
      bookInfos,
      showArticles,
      showMajor,
      goBack,
      currentPage,
      total,
      handleCurrentChange,
      major
    }
  }
})

</script>

<style scoped>
.active {
  color: #0097FF;
}
.categories {
  position: relative;
  top: 15px;
}
.el-aside {
  height: 500px;
  overflow: hidden;
}
.articles {
  margin-bottom: 20px;
}
.majorName {
  margin-bottom: 20px;
}
.el-divider {
  margin-top: 0px;
}
</style>
